import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Steps, Button,Space,
    Input, Row, Col, Tabs,
    Form, DatePicker, Select,
    Checkbox, Table, InputNumber
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
} from '@ant-design/icons';

const { Step } = Steps;
const { TabPane } = Tabs;
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    switchModal = (visible) => {
        this.setState({ visible });
    };
    onFinish = (values) => {
        var orderHed = values.order;
        var orderDetail = values.orderDetail;
        var orderRel = values.orderRel;
        const datas = {
            ...orderHed,
            ...orderDetail,
            ...orderRel,
            'DueDate': orderHed['DueDate'].format('YYYY-MM-DD'),
            'OrderDate': orderHed['OrderDate'].format('YYYY-MM-DD'),
            'ShipDate': orderRel['ShipDate'].format('YYYY-MM-DD'),
        };
        console.log(datas)
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const columns = [
            {
                title: '项目',
                dataIndex: 'OrderLine',
                key: 'OrderLine',
            },
            {
                title: '未结',
                dataIndex: 'OpenLine',
                key: 'OpenLine',
            },
            {
                title: '产品',
                dataIndex: 'PartNum',
                key: 'PartNum',
            },
            {
                title: '产品描述',
                dataIndex: 'PartDescription',
                key: 'PartDescription',
            },
            {
                title: '销售数量',
                dataIndex: 'OrderQty',
                key: 'OrderQty',
            },
            {
                title: '单价',
                dataIndex: 'UnitPrice',
                key: 'UnitPrice',
            },
        ];
        const columnRel = [
            {
                title: '项目',
                dataIndex: 'OrderLine',
                key: 'OrderLine',
            },
            {
                title: '订单数量',
                dataIndex: 'ShipReqQty',
                key: 'ShipReqQty',
            },
            {
                title: '未结',
                dataIndex: 'OpenLine',
                key: 'OpenLine',
            },
            {
                title: '出货日',
                dataIndex: 'ReqDate',
                key: 'ReqDate',
            },
            {
                title: '直接生产',
                dataIndex: 'Make',
                key: 'Make',
            },
            {
                title: '直接采购',
                dataIndex: 'BuyToOrder',
                key: 'BuyToOrder',
            },

        ];
        return (
            <PageHeaderWrapper>
                <Card style={{ marginBottom: 16 }}>
                    <Steps current={4}>
                        <Step title="配置" description="配置您的公司信息" />
                        <Step title="客户信息" description="导入或创建客户" />
                        <Step title="报价单模板" description="自定义一份报价单模板" />
                        <Step title="付款方式" description="选择您的默认客户付款方式" />
                        <Step title="示例" description="发送一份SO订单示例" />
                    </Steps>
                </Card>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Space>
                        <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="link" icon={<ImportOutlined />}>导入</Button>
                        <Button type="link" icon={<PrinterOutlined />}>打印预览</Button>
                    </Space>                    
                    <Row gutter={[16.16]}>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="汇总" key="1">
                                        <Form.Item name={['order', 'customer']} label="选择客户">
                                            <Select
                                                style={{ width: '50%' }}
                                                showSearch
                                                placeholder="请选择客户"
                                                filterOption={(input, option) =>
                                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item name={['order', 'currencyCode']} label="货币类型">
                                            <Select
                                                style={{ width: 200 }}
                                                placeholder="请选择货币类型"
                                            >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item name={['order', 'ShipViaCode']} label="运输方法">
                                            <Select
                                                style={{ width: 200 }}
                                                placeholder="请选择运输方法"
                                            >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item
                                            name={['order', 'OrderDate']}
                                            label="订单日期"
                                            rules={[{ required: true, message: "请选择到期日" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item
                                            name={['order', 'DueDate']}
                                            label="需求日期"
                                            rules={[{ required: true, message: "请选择需求日期" }]}>
                                            <DatePicker onChange={this.onChange} />
                                        </Form.Item>
                                        <Form.Item name={['order', 'ProjectNum']} label="项目号">
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['order', 'isActive']} label="未结" valuePropName="checked">
                                            <Checkbox></Checkbox>
                                        </Form.Item>

                                    </TabPane>
                                    <TabPane tab="分录明细" key="2">
                                        <Form.Item
                                            name={['orderDetail', 'PartNum']}
                                            label="产品代号"
                                            rules={[{ required: true, message: "请输入产品代号" }]}>
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['orderDetail', 'PartDescription']}
                                            label="产品描述">
                                            <Input.TextArea readOnly disabled />
                                        </Form.Item>
                                        <Form.Item
                                            name={['orderDetail', 'UnitPrice']}
                                            label="单价"
                                            rules={[{ required: true, message: "请输入单价" }]}>
                                            <Input prefix="￥" suffix="RMB" style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['orderDetail', 'Discount']}
                                            label="折扣">
                                            <Input suffix="%" style={{ width: 100 }} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['orderDetail', 'WarrantyDate']}
                                            label="保修期"
                                            rules={[{ required: true, message: "请选择保修期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item
                                            name={['orderDetail', 'QSDate']}
                                            label="质保期"
                                            rules={[{ required: true, message: "请选择质保期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="发货明细" key="3">
                                        <Form.Item
                                            name={['orderRel', 'OrderQty']}
                                            label="订单数量"
                                            rules={[{ required: true, message: "请输入订单数量" }]}>
                                            <InputNumber min={1} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['orderRel', 'ShipDate']}
                                            label="需求日期"
                                            rules={[{ required: true, message: "请选择出货日期" }]}>
                                            <DatePicker />
                                        </Form.Item>
                                        <Form.Item name={['orderRel', 'ShipViaCode']} label="运输方法">
                                            <Select
                                                style={{ width: 200 }}
                                                placeholder="请选择运输方法" >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item wrapperCol={{ offset: 5 }} style={{ marginBottom: "0px" }}>
                                            <Form.Item name={['orderRel', 'Direct']} valuePropName="checked"
                                                style={{ display: 'inline-block', width: 120 }}>
                                                <Checkbox>直接出货</Checkbox>
                                            </Form.Item>
                                            <Form.Item name={['orderRel', 'Make']} valuePropName="checked"
                                                style={{ display: 'inline-block', width: 120 }}>
                                                <Checkbox>直接生产</Checkbox>
                                            </Form.Item>
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="联系人" key="4">
                                        <Form.Item
                                            name={['order', 'fullName']}
                                            label="联系人"
                                            rules={[{ required: true, message: "请输入联系人" }]}>
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['order', 'telphone']} label="联系电话">
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['order', 'emailAddress']}
                                            rules={[{ required: true, message: "请输入电子邮件" }]}
                                            label="电子邮件">
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['order', 'address']}
                                            label="联系地址">
                                            <Input.TextArea />
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="订单备注" key="5">
                                        <Form.Item
                                            wrapperCol={24}
                                            name={['orderHed', 'CommentText']} >
                                            <Input.TextArea rows={10} />
                                        </Form.Item>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="分录项" key="1">
                                        <Table size="small" columns={columns} dataSource={this.state.dataSource} />
                                        <Button block type="dashed" icon={<PlusOutlined />}>添加分录</Button>
                                    </TabPane>
                                    <TabPane tab="发货行" key="2">
                                        <Table size="small" columns={columnRel} dataSource={this.state.dataSource} />
                                        <Button block type="dashed" icon={<PlusOutlined />}>添加发货项</Button>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                    </Row>
                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;